<template>
	<view class="container">
		<view class="top">
			<image class="tiaozhuan" src="../../../static/images/ljh/jt.png" @click="returnButton"></image>
			<view class="title">应急救援</view>
		</view>
		<view class="dt">
			<uni-card>
				<map style="width: 320px; height: 300px;" :latitude="addForm.latitude" :longitude="addForm.longitude"
					scale="16" :markers="markers" @markertap="onMarkerTap"></map>
			</uni-card>


			<uni-card>
				<view class="tabs">
					<view :class="['tab', activeTab === '搭电' ? 'active' : '']" @click="changeTab('搭电')">搭电</view>
					<view :class="['tab', activeTab === '换胎' ? 'active' : '']" @click="changeTab('换胎')">换胎</view>
					<view :class="['tab', activeTab === '拖车' ? 'active' : '']" @click="changeTab('拖车')">拖车</view>
				</view>

				<view class="form" v-if="activeTab=='拖车'">
					<view class="form-item">
						<text class="label">起点</text>
						<input class="input" v-model="addForm.start" placeholder="河南省焦作市山阳区32号" />
					</view>

					<view class="form-item">
						<text class="label">终点</text>
						<input class="input" v-model="addForm.end" placeholder="山阳区解放路66号" />
					</view>

					<view class="form-item">
						<text class="label">求助人</text>
						<input class="input" v-model="addForm.realName" placeholder="张先生" />
					</view>

					<view class="form-item">
						<text class="label">联系方式</text>
						<input class="input" v-model="addForm.phone" placeholder="15523632541" />
					</view>

					<view class="form-item">
						<text class="label">车牌</text>
						<input class="input" placeholder="豫CJ4321" />
					</view>

					<view class="form-item">
						<text class="label">描述</text>
						<textarea class="textarea" v-model="addForm.remark" placeholder="请准确描述当前的状况及所需的帮助"></textarea>
					</view>

					<button class="submit-button"  @click="call_rescue">呼叫救援</button>
					<view class="history" @click="gotoRescue">救援记录 ></view>
				</view>
				<view class="form" v-if="activeTab=='搭电'">
					<view class="form-item">
						<text class="label">位置</text>
						<input class="input" v-model="addForm.address" placeholder="河南省焦作市山阳区32号" />
					</view>
					<view class="form-item">
						<text class="label">求助人</text>
						<input class="input" v-model="addForm.realName" placeholder="张先生" />
					</view>

					<view class="form-item">
						<text class="label">联系方式</text>
						<input class="input" v-model="addForm.phone" placeholder="15523632541" />
					</view>

					<view class="form-item">
						<text class="label">车牌</text>
						<input class="input" placeholder="豫CJ4321" />
					</view>

					<view class="form-item">
						<text class="label">描述</text>
						<textarea class="textarea" v-model="addForm.remark" placeholder="请准确描述当前的状况及所需的帮助"></textarea>
					</view>

					<button class="submit-button" @click="call_rescue">呼叫救援</button>
					<view class="history" @click="gotoRescue">救援记录 ></view>
				</view>
			</uni-card>
			<uni-card title="警务救援">
				<view class="jwjy">
					<view class="jwjyitem">
						<image src="../../../static/images/ljh/jtsg.png"></image>
						<view>交通事故</view>
						<view>122</view>
					</view>
					<view class="jwjyitem">
						<image src="../../../static/images/ljh/hj.png"></image>
						<view>火警</view>
						<view>119</view>
					</view>
					<view class="jwjyitem">
						<image src="../../../static/images/ljh/jjb.png"></image>
						<view>急救中心</view>
						<view>120</view>
					</view>
					<view class="jwjyitem">
						<image src="../../../static/images/ljh/jc.png"></image>
						<view>公安报警</view>
						<view>110</view>
					</view>
				</view>
			</uni-card>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeTab: '搭电',

				addForm: {
					userId: '',
					address: '',
					realName: '',
					phone: '',
					longitude: '',
					latitude: '',
					remark: '',
					type: 1,
					start:'',
					end:''
				},
				nowMsg: {
					id: '',
					name: '',
					address: '',
					img: '../../../static/images/ljh/qx.png',
					distance: '',
					latitude: '',
					longitude: ''
				},

				//	地图标注
				markers: [],
			};
		},
		onLoad() {
			this.getMyPosition(); //当前位置
			this.getUser();
			this.getShop();
		},
		methods: {
			
			// 地图标注点击事件
			onMarkerTap(e) {
				// 点击标注点时显示商家数据
				this.selectedMarker = this.markers.find(obj => obj.id ===
					e.detail.markerId);
				if (this.selectedMarker) {
					this.nowMsg.id = this.selectedMarker.id;
					this.nowMsg.name = this.selectedMarker.name;
					this.nowMsg.address = this.selectedMarker.address;
					this.nowMsg.latitude = this.selectedMarker.latitude;
					this.nowMsg.longitude = this.selectedMarker.longitude;
					
					//	计算距离
					// this.nowMsg.distance = this.calculateDistanceInMeters(this.markers[0].latitude,this.markers[0].longitude,this.selectedMarker.latitude,this.selectedMarker.longitude)
					
					console.log(this.selectedMarker);
					let that = this;
					this.$http({
						url: '/tx/ws/geocoder/v1/?location=' + this.selectedMarker.latitude + ',' + this.selectedMarker
							.longitude + '&key=UNGBZ-RWT3T-SHHXZ-VAME3-XUHPH-EBBSP&get_poi=1',
						method: 'GET',
						success(res) {
							// console.log(res.data.result);
							that.addForm.end = res.data.result.formatted_addresses
								.standard_address
							// console.log(that.location);
						}
					})
				}
			},
			
			//	获取附近shop
			getShop() {
				let that = this;
				let userId = uni.getStorageSync('user_id');
				
				this.$http({
					//	传入当前用户的id用于区别不同用户之间的  附近门店
					url: '/api/shop/manage/listGeo/'+userId,
					method: 'GET',
					success(res) {
						console.log(res);
						res.data.rows.forEach(item => {
								const marker = {
									id: item.id,
									latitude: item.latitude,
									longitude: item.longitude,
									width: 25,
									height: 25,
									iconPath: '../../../static/images/ljh/poi.png',
									callout: { // 自定义一直显示的数据，自己的定位信息
										content: item.name,
										color: "#fff",
										bgColor: '#000',
										borderRadius: 10,
										padding: 10,
										display: "ALWAYS",
									}
								}
								that.markers.push(marker)
							})
							console.log(that.markers);
						}
					})
				},

					//	呼叫救援
					call_rescue() {
						this.$http({
							url: '/api/jiuyvanrenwu/jiuyvanrenwu',
							method: 'POST',
							data: this.addForm,
							success(res) {
								console.log(res);
								if (res.data.code == 200) {
									alert('呼叫成功')
									uni.$u.route('/pages/ljh/SaveRecord/SaveRecord')

								} else {
									alert('呼叫失败')
								}
							}
						})
					},



					//	获取当前用户信息
					getUser() {
						let userId = uni.getStorageSync('user_id')
						this.nowMsg.userId = userId;
						let that = this;
						this.$http({
							// uni.getStorage("user_id")
							url: '/api/user/users/' + userId,
							method: 'GET',
							success(res) {
								console.log(res);
								that.addForm.realName = res.data.data.realName;
								that.addForm.phone = res.data.data.phone;

							}
						})
					},


					// 获取经纬度
					getMyPosition() {
						let that = this;
						uni.getLocation({
							success(resp) {
								// console.log(resp);
								that.addForm.longitude = resp.longitude;
								that.addForm.latitude = resp.latitude;
								const marker = {
									id: 999,
									latitude: resp.latitude,
									longitude: resp.longitude,
									width: 25,
									height: 25,
									iconPath: '../../../static/images/ljh/dw1.png',
									callout: { // 自定义一直显示的数据，自己的定位信息
										content: "我",
										color: "#fff",
										bgColor: '#000',
										borderRadius: 10,
										padding: 10,
										display: "ALWAYS",
									}
								}
								that.markers.push(marker)
								// console.log(that.markers);

								//	进行地址逆向解析
								that.$http({
									url: '/tx/ws/geocoder/v1/?location=' + resp.latitude + ',' + resp
										.longitude + '&key=UNGBZ-RWT3T-SHHXZ-VAME3-XUHPH-EBBSP&get_poi=1',
									method: 'GET',
									success(res) {
										console.log(res.data.result);
										that.addForm.address = res.data.result.formatted_addresses
											.recommend
										that.addForm.start = res.data.result.formatted_addresses
											.standard_address	
										// console.log(that.location);
									}
								})

							},
							fail() {
								console.log('定位失败')
							}
						})
					},

					changeTab(tab) {
						this.activeTab = tab;
						// console.log(this.activeTab)
						if (tab == '搭电') {
							this.addForm.type = 1
						} else if (tab == '救援') {
							this.addForm.type = 2
						} else if (tab == '搭电救援') {
							this.addForm.type = 3
						}
					},
					returnButton() {
						// uni.navigateBack()
						uni.$u.route({
							url: '/pages/index/index',
							type: 'tab'
						})
					},
					gotoRescue(){
						uni.$u.route('/pages/ljh/SaveRecord/SaveRecord')
					}
			},
		};
</script>

<style>
	.tiaozhuan {
		position: absolute;
		color: white;
		font-size: 50rpx;
		top: 50rpx;
		left: 20rpx;
		width: 50rpx;
		height: 50rpx;
	}

	.jwjy {
		display: flex;
		justify-content: space-around;
	}

	.jwjyitem {
		width: 120rpx;
		text-align: center;
	}

	.jwjyitem image {
		width: 80rpx;
		height: 80rpx;
	}

	.dt {
		position: absolute;
		top: 150rpx;
	}

	.top {
		width: 100%;
		height: 450rpx;
		background-image: url(@/static/images/ljh/tc1.png);
	}

	.title {
		width: 100%;
		color: white;
		text-align: center;
		padding: 50rpx 0rpx;
		font-size: 35rpx;
	}

	.container {
		/* padding: 20px; */
		background-color: #f9f9f9;
		height: 100vh;
	}

	.tabs {
		display: flex;
		justify-content: space-around;
		margin-bottom: 20px;
	}

	.tab {
		padding: 10px 20px;
		font-size: 16px;
		color: #333;
		border-bottom: 2px solid transparent;
		cursor: pointer;
	}

	.tab.active {
		color: #007aff;
		border-bottom: 2px solid #007aff;
	}

	.form {
		background-color: #fff;
		padding: 20px;
		border-radius: 8px;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	}

	.form-item {
		margin-bottom: 15px;
	}

	.label {
		font-size: 14px;
		margin-bottom: 5px;
		display: block;
		color: #666;
	}

	.input,
	.textarea {
		width: 100%;
		padding: 10px;
		font-size: 14px;
		border: 1px solid #ddd;
		border-radius: 4px;
		background-color: #f9f9f9;
	}

	.textarea {
		min-height: 80px;
	}

	.submit-button {
		width: 100%;
		height: 100rpx;
		padding: 15px;
		font-size: 16px;
		color: #fff;
		background-color: #ff6f00;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		text-align: center;
	}

	.history {
		margin-top: 10px;
		font-size: 14px;
		color: #007aff;
		text-align: center;
		cursor: pointer;
	}
</style>